

<!DOCTYPE html>
<html lang class="loading">
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Hightcharts之实时曲线图 - 闲看花开 静待花落</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate">
    <meta name="keywords" content="贰货不二,"> 
    <meta name="description" content="1、导入highcharts.js和jQuery.js2、Html代码和js代码123//container3为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用 &amp;lt;div id=,"> 
    <meta name="author" content="贰货不二"> 
    <link rel="alternative" href="atom.xml" title="闲看花开 静待花落" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <link rel="stylesheet" href="/css/diaspora.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
    
</head>
</html>
<body class="loading">
    <span id="config-title" style="display:none">闲看花开 静待花落</span>
    <div id="loader"></div>
    <div id="single">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="icon-home image-icon" href="javascript:;" data-url="https://mrdcg.github.io"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">Hightcharts之实时曲线图</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">Hightcharts之实时曲线图</h1>
        <div class="stuff">
            <span>七月 07, 2019</span>

            <span>
   阅读数(请刷新)<span id="busuanzi_value_page_pv"></span>
</span>
            
  <ul class="post-tags-list"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/插件/">插件</a></li></ul>



        </div>
        <div class="content markdown">
            <h2 id="1、导入highcharts-js和jQuery-js"><a href="#1、导入highcharts-js和jQuery-js" class="headerlink" title="1、导入highcharts.js和jQuery.js"></a><a href></a>1、导入highcharts.js和jQuery.js</h2><h2 id="2、Html代码和js代码"><a href="#2、Html代码和js代码" class="headerlink" title="2、Html代码和js代码"></a><a href></a>2、Html代码和js代码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//container3为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用</span><br><span class="line"> &lt;div id=&quot;container3&quot; style=&quot;width:380px;height:230px;margin:0 auto;padding-top: 10px&quot;&gt; </span><br><span class="line"> &lt;/div&gt;</span><br></pre></td></tr></table></figure>


<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * </span><br><span class="line"> */</span><br><span class="line">$(function()&#123;</span><br><span class="line">	Highcharts.setOptions(&#123;</span><br><span class="line">	//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置</span><br><span class="line">		global:&#123;</span><br><span class="line">			useUTC:false     //默认true</span><br><span class="line">	/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">	//更新曲线上的点</span><br><span class="line">function activeLastPointToolip(chart) &#123;</span><br><span class="line">		var points = chart.series[0].points;</span><br><span class="line">		chart.tooltip.refresh(points[points.length -1]);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">var chars;</span><br><span class="line">$(document).ready(function()&#123;</span><br><span class="line">	var options = &#123;</span><br><span class="line">//			图表定义</span><br><span class="line">			chart:&#123;</span><br><span class="line">				backgroundColor:&apos;transparent&apos;,		//背景色</span><br><span class="line">				renderTo: &apos;container3&apos;,//图表渲染容器的 HTML 元素的 id 或对象引用</span><br><span class="line">				type:&apos;spline&apos;,  				//曲线，修改spline可改为饼图等其他图表</span><br><span class="line">				marginRight:10,</span><br><span class="line">				events:&#123;</span><br><span class="line">					//图表加载完成时触发</span><br><span class="line">					load:function()&#123;</span><br><span class="line">						var series = this.series[0];</span><br><span class="line">						options = this;</span><br><span class="line">						activeLastPointToolip(options);</span><br><span class="line">						var t = 0;</span><br><span class="line">						var r = 0;</span><br><span class="line">						//ajax请求，获取后台数据</span><br><span class="line">						$.ajax(&#123;</span><br><span class="line">							url:&apos;/Software-cup001/Current&apos;,			//获取数据的页面地址</span><br><span class="line">							</span><br><span class="line">							//默认值: true，dataType 为 script 和 json时默认为 false。设置为 false 将不缓存此页面。</span><br><span class="line">							cache:false,</span><br><span class="line">							dataType:&quot;json&quot;,</span><br><span class="line">							data:&#123;&#125;,</span><br><span class="line">							//仅在服务器数据改变时获取新数据。默认值: false</span><br><span class="line">							ifModified:false,</span><br><span class="line">							//获取数据成功，将数据放入result</span><br><span class="line">							success: function(result)&#123;</span><br><span class="line">								t = result.length;   //获取到的数据的长度</span><br><span class="line">							&#125;</span><br><span class="line">							</span><br><span class="line">						&#125;);</span><br><span class="line">						//定时器，每秒钟获取一次数据</span><br><span class="line">						setInterval(function()&#123;</span><br><span class="line">						$.ajax(&#123;</span><br><span class="line">							url:&apos;/Software-cup001/Current&apos;,</span><br><span class="line">							</span><br><span class="line">							//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。</span><br><span class="line">							cache:false,</span><br><span class="line">							dataType:&quot;json&quot;,</span><br><span class="line">							data:&#123;&#125;,</span><br><span class="line">							//仅在服务器数据改变时获取新数据。默认值: false</span><br><span class="line">							ifModified:false,</span><br><span class="line">							success: function(result)&#123;</span><br><span class="line">									</span><br><span class="line">								if(r&gt;result.length)&#123;</span><br><span class="line">									t=result.length;</span><br><span class="line">									</span><br><span class="line">								&#125;</span><br><span class="line">								//保证每次取数据都是从上次所取数据的后一个数据</span><br><span class="line">								//ajax每次取数据都是从头开始获取</span><br><span class="line">								r=result.length;</span><br><span class="line">								for(;t&lt;result.length;t++)&#123;	</span><br><span class="line">									if(result[t].site==&quot;校园大门&quot;)&#123;</span><br><span class="line">										var x = (new Date()).getTime();</span><br><span class="line">										//将符合的数据加入曲线图表</span><br><span class="line">										series.addPoint([x,result[t].headnum],true,true);</span><br><span class="line">										activeLastPointToolip(options);</span><br><span class="line">										&#125;													</span><br><span class="line">								&#125;</span><br><span class="line">//								&#125;);</span><br><span class="line">							&#125;</span><br><span class="line">						&#125;);	</span><br><span class="line">						&#125;,1000);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			colors:[&apos;#64E572&apos;],   //曲线颜色</span><br><span class="line">			title:&#123;      </span><br><span class="line">			//标题名称    </span><br><span class="line">              text: &apos;&apos;,</span><br><span class="line">               //标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px</span><br><span class="line">              x:-20</span><br><span class="line">          &#125;,</span><br><span class="line">          /*x轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调*/</span><br><span class="line">          xAxis:&#123;</span><br><span class="line">        	  type:&apos;datetime&apos;,			//x轴类型，时间型</span><br><span class="line">        	  tickPixelInterval: 100, 			//决定了刻度之间间隔的像素值</span><br><span class="line">          &#125;,</span><br><span class="line">          //y轴，y轴的数据值最小为0</span><br><span class="line">          yAxis: &#123;</span><br><span class="line">        	  startOnTick:true,  //为true时，设置min生效</span><br><span class="line">        	  min:0,</span><br><span class="line">              //y轴标题</span><br><span class="line">              title: &#123;</span><br><span class="line">                  text: &apos;数值&apos;,</span><br><span class="line">                  </span><br><span class="line">              &#125;,</span><br><span class="line">              //标示线</span><br><span class="line">              plotLines:[&#123;</span><br><span class="line">                  color:&apos;red&apos;,           //线的颜色，定义为红色</span><br><span class="line">                  dashStyle:&apos;solid&apos;,     //默认值，这里定义为实线</span><br><span class="line">                  value:3,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线</span><br><span class="line">                  width:2,                //标示线的宽度，2px</span><br><span class="line">                  label:&#123;</span><br><span class="line">                      text:&apos;标准人数：3人&apos;,     //标签的内容</span><br><span class="line">                      align:&apos;left&apos;,                //标签的水平位置，水平居左,默认是水平居中center</span><br><span class="line">                      x:10,                         //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px</span><br><span class="line">                      style:&#123;</span><br><span class="line">                      color:&apos;white&apos;,		//文字颜色</span><br><span class="line">                      &#125;</span><br><span class="line">                  &#125;</span><br><span class="line">              &#125;]</span><br><span class="line">          &#125;,</span><br><span class="line">          //图例，图例说明是包含图表中数列标志和名称的容器</span><br><span class="line">          legend:&#123;</span><br><span class="line">        	  align:&apos;center&apos;,</span><br><span class="line">        		  floating:false,</span><br><span class="line">        		  borderWidth:0,</span><br><span class="line">        		 itemStyle:&#123;</span><br><span class="line">        			 color:&apos;#FFDAB9&apos;</span><br><span class="line">        		 &#125;</span><br><span class="line">          &#125;,</span><br><span class="line">          //数据提示框，显示每个点的含义（对应的x轴和y轴数据）</span><br><span class="line">          tooltip: &#123;</span><br><span class="line">        	  formatter: function() &#123;</span><br><span class="line">                    return &apos;&lt;b&gt;&apos;+ this.series.name +&apos;&lt;/b&gt;&lt;br/&gt;&apos;+</span><br><span class="line">                        Highcharts.dateFormat(&apos;%Y-%m-%d %H:%M:%S&apos;, this.x) +&apos;&lt;br/&gt;&apos;+&quot;人数：&quot;+</span><br><span class="line">                        Highcharts.numberFormat(this.y, 0);</span><br><span class="line">                &#125;</span><br><span class="line">          &#125;, </span><br><span class="line">          //版权信息</span><br><span class="line">          credits:&#123;</span><br><span class="line">        	  enabled:false    //版权信息不可见</span><br><span class="line">          &#125;,</span><br><span class="line">        //数据点信息</span><br><span class="line">        plotOptions: &#123;</span><br><span class="line">            series: &#123; 	</span><br><span class="line">                marker: &#123;</span><br><span class="line">                    enabled: false, /*数据点是否显示，不显示则为一条线*/</span><br><span class="line">                    radius: 5,  /*数据点大小px*/</span><br><span class="line"></span><br><span class="line">                    //fillColor:&apos;#ff3300&apos;         /*数据点颜色*/</span><br><span class="line">                &#125;,</span><br><span class="line">            &#125;,</span><br><span class="line">       </span><br><span class="line">          </span><br><span class="line">        &#125;,</span><br><span class="line">        //数据列</span><br><span class="line">        series:[&#123;</span><br><span class="line">        	name:&apos;校园大门人流量&apos;	,</span><br><span class="line">        	//20个伪数据</span><br><span class="line">        	data: (function () &#123;</span><br><span class="line">    			// 生成随机值</span><br><span class="line">    			var data = [],</span><br><span class="line">    				time = (new Date()).getTime(),</span><br><span class="line">    				i;</span><br><span class="line">    			for (i = -19; i &lt;= 0; i += 1) &#123;</span><br><span class="line">    				data.push(&#123;</span><br><span class="line">    					x: time + i * 1000,</span><br><span class="line">    					y: Math.random()*10+3</span><br><span class="line">    				&#125;);</span><br><span class="line">    			&#125;</span><br><span class="line">    			return data;</span><br><span class="line">    		&#125;())</span><br><span class="line">        &#125;]</span><br><span class="line">	&#125;;</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	chart = new Highcharts.Chart(options);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p> <img src="https://i.loli.net/2019/07/07/5d21de56337c285661.png" alt></p>
<h2 id="3、Highcharts"><a href="#3、Highcharts" class="headerlink" title="3、Highcharts"></a><a href></a>3、Highcharts</h2><p> <a href="https://api.highcharts.com.cn/" target="_blank" rel="noopener">Highcharts API文档</a></p>
<p> <a href="https://www.highcharts.com.cn/download" target="_blank" rel="noopener">Highcharts.js下载地址</a></p>
<p> Highcharts提供CDN 服务，在下载界面可见详细描述<br> <a href="https://jquery.com/" target="_blank" rel="noopener">jQuery下载</a></p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="http://link.hhtjim.com/163/92939.mp3">
            </audio>
            
        </div>
        
        
    <div id='gitalk-container' class="comment link"
        data-ae='false'
        data-ci='e79d3ae9c45da13e6f66'
        data-cs='896cb16e937a9e56f91295c1bab9e5aad59746ad'
        data-r='MrDCG.github.io'
        data-o='MrDCG'
        data-a='MrDCG'
        data-d='true'
    >查看评论</div>


        
    </div>

    
    
</div>

    </div>
</div>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/koharu.model.json"},"display":{"position":"right","width":145,"height":315},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">
<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>




</html>
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>